<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/slideBox.css">
        <script type="text/javascript" src="js/jquery2-1.js"></script>
        <script type="text/javascript" src="js/slideBox.js"></script>
        <!-- SlideBxo DEMO -->
        <script>
            jQuery(function($){
                $('#demo1').slideBox();
                $('#demo2').slideBox({
                    direction : 'top',//left,top#方向
                    duration : 0.3,//滚动持续时间，单位：秒
                    easing : 'linear',//swing,linear//滚动特效
                    delay : 5,//滚动延迟时间，单位：秒
                    startIndex : 1//初始焦点顺序
                });
                $('#demo3').slideBox({
                    duration : 0.3,//滚动持续时间，单位：秒
                    easing : 'linear',//swing,linear//滚动特效
                    delay : 5,//滚动延迟时间，单位：秒
                    hideClickBar : false,//不自动隐藏点选按键
                    clickBarRadius : 10
                });
                $('#demo4').slideBox({
                    hideBottomBar : true//隐藏底栏
                });
            });
        </script>
	</head>
	<body>
	<div id="demo1" class="slideBox">
		<ul class="items">
			<li><a href="http://www.jq22.com/" title="这里是测试标题一"><img src="img/1.jpg"></a></li>
			<li><a href="http://www.jq22.com/" title="这里是测试标题二"><img src="img/2.jpg"></a></li>
			<li><a href="http://www.jq22.com/" title="这里是测试标题三"><img src="img/3.jpg"></a></li>
			<li><a href="http://www.jq22.com/" title="这里是测试标题四"><img src="img/4.jpg"></a></li>
			<li><a href="http://www.jq22.com/" title="这里是测试标题五"><img src="img/5.jpg"></a></li>
		</ul>
	</div>
	<h3>二、上下轮播，滚动持续0.3秒，滚动延迟5秒，滚动效果linear，初始焦点第2张，点选按键自动隐藏</h3>
	<div id="demo2" class="slideBox">
		<ul class="items">
			<li><a href="http://www.jq22.com/" title="这里是测试标题一"><img src="img/1.jpg"></a></li>
			<li><a href="http://www.jq22.com/" title="这里是测试标题二"><img src="img/2.jpg"></a></li>
			<li><a href="http://www.jq22.com/" title="这里是测试标题三"><img src="img/3.jpg"></a></li>
			<li><a href="http://www.jq22.com/" title="这里是测试标题四"><img src="img/4.jpg"></a></li>
			<li><a href="http://www.jq22.com/" title="这里是测试标题五"><img src="img/5.jpg"></a></li>
		</ul>
	</div>
	<h3>三、左右轮播，滚动持续0.3秒，滚动延迟5秒，滚动效果linear，初始焦点第1张，点选按键不隐藏，按键边框半径10px（圆形）</h3>
	<div id="demo3" class="slideBox">
		<ul class="items">
			<li><a href="http://www.jq22.com/" title="这里是测试标题一"><img src="img/1.jpg"></a></li>
			<li><a href="http://www.jq22.com/" title="这里是测试标题二"><img src="img/2.jpg"></a></li>
			<li><a href="http://www.jq22.com/" title="这里是测试标题三"><img src="img/3.jpg"></a></li>
			<li><a href="http://www.jq22.com/" title="这里是测试标题四"><img src="img/4.jpg"></a></li>
			<li><a href="http://www.jq22.com/" title="这里是测试标题五"><img src="img/5.jpg"></a></li>
		</ul>
	</div>
	<h3>四、隐藏底栏</h3>
	<div id="demo4" class="slideBox">
		<ul class="items">
			<li><a href="http://www.jq22.com/" title="这里是测试标题一"><img src="img/1.jpg"></a></li>
			<li><a href="http://www.jq22.com/" title="这里是测试标题二"><img src="img/2.jpg"></a></li>
			<li><a href="http://www.jq22.com/" title="这里是测试标题三"><img src="img/3.jpg"></a></li>
			<li><a href="http://www.jq22.com/" title="这里是测试标题四"><img src="img/4.jpg"></a></li>
			<li><a href="http://www.jq22.com/" title="这里是测试标题五"><img src="img/5.jpg"></a></li>
		</ul>
	</div>
	</body>
</html>
